<!--
 * @Author: wangming
 * @Date: 2022-04-12 10:31:06
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-10 10:59:02
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/mainContent/__layouts/hlTableList/__components/childTable.vue
 * @Description: 
-->
<template>
  <div @click.stop="handleAdd" class="pt15 pb15">
    <el-table
      size="mini"
      border
      :data="tableData"
      :stripe="!!config.__config.stripe"
      @header-click="headerClick"
    >
      <!-- 序号 -->
      <!-- <el-table-column type="index" width="50"></el-table-column> -->
      <!-- 复选 -->
      <!-- <el-table-column type="selection" width="50"></el-table-column> -->
      <el-table-column
        :label-class-name="columnKey === i.key ? 'header-active' : ''"
        v-for="(i, index) in columnList"
        :key="index + i.code"
        :label="i.title"
        :prop="i.code"
        :fixed="i.fixed"
        :width="i.widthType === '1' ? null : i.width"
      >
      </el-table-column>
      <el-table-column
        :label-class-name="columnKey === operate.key ? 'header-active' : ''"
        prop="操作"
        :fixed="operate.fixed"
        :label="operate.title"
        :width="operate.width"
      >
        <template slot-scope="scope">
          <slot name="operate" v-if="!operate.isRender"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import hmButton from "./button";
import { uuid } from "@/utils/common.js";
var moment = require("moment");
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
import { differenceWith, concat } from "lodash";
import { TABLE_RETAIN_CODE } from "@/utils/const";
export default {
  components: { hmButton },
  watch: {
    modelKey() {
      this.gethmList(true);
    },
  },
  created() {
    if (!!this.modelKey) {
      this.gethmList(false);
    }
  },
  props: {
    columnKey: {
      type: String,
      default: null,
    },
    modelKey: {
      type: String,
      default: null,
    },
    tableData: {
      type: Array,
      default: () => [{}, {}, {}],
    },
    config: {
      type: Object,
      default: () => ({}),
    },
    operate: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      addDifferIds: [],
      deleteDifferIds: [],
    };
  },
  computed: {
    columnList() {
      return this.config.__config?.getEntitymodelList.filter(
        (i) => i.showColumn
      );
    },
  },
  methods: {
    handleAdd() {
      this.$emit("handleAdd", {
        ...this.config,
        addDifferIds: this.addDifferIds,
        deleteDifferIds: this.deleteDifferIds,
        getEntitymodelList: this.config.__config.getEntitymodelList,
      });
    },
    async gethmList(show) {
      if (!this.modelKey) {
        this.config.__config.getEntitymodelList = [];
        return;
      }
      let hmentitymodelList = await getHmentitymodelList({
        activated: true,
        modelKey: this.modelKey,
      });
      //取消是否已经删除字段
      hmentitymodelList = hmentitymodelList.filter(
        (i) => i.code !== "deleted" && TABLE_RETAIN_CODE.indexOf(i.type) > -1
      );
      //table列
      let entitylist = hmentitymodelList.map((i) =>
        Object.assign(
          {
            title: i.name, //table 标题
            title_i18n: i.localism,
            showColumn: show && i.createType !== "SYSTEM", //是否显示
            fixed: false, //是否冻结
            widthType: "1", //1 自适应 2固定
            width: 80, //宽度
            renderJsx: "", //自定义渲染jsx函数
            isRender: false, //是否自定义渲染
            format: "YYYY-MM-DD", //日期类型
            sort: false, //是否排序查询
            textEdit: false, //是否编辑文本
            key: i.code + "_" + uuid(3),
          },
          i
        )
      );
      if (show) {
        this.config.__config.getEntitymodelList = entitylist;
      } else {
        let { getEntitymodelList } = this.config.__config;
        this.config.__config.getEntitymodelList = this.transformList(
          entitylist,
          getEntitymodelList,
          "showColumn"
        );
      }
    },
    //集合差异对比，新增的字段插入已有的字段数据里
    transformList(list, modellist, key) {
      //新增的
      let addDifference = differenceWith(
        list,
        modellist,
        (x, y) => x.id === y.id
      );
      //删除的
      let deleteDifference = differenceWith(
        modellist,
        list,
        (x, y) => x.id === y.id
      );
      //多余的字段id
      this.addDifferIds = addDifference.map((i) => i.id);
      //删除的字段id
      this.deleteDifferIds = deleteDifference.map((i) => i.id);
      //删除的没被选中的直接过滤
      modellist = modellist.filter((i) => {
        return i[key] || this.deleteDifferIds.indexOf(~~i.id) === -1;
      });
      return concat(modellist, addDifference);
    },
    //点击表头
    headerClick({ property }, event) {
      if (property === "操作") {
        this.operate.tagName = this.config.__config.operateTagName;
        this.$emit("header-click", this.operate);
      } else if (!!property) {
        let form = this.columnList.find(({ code }) => code === property);
        form.tagName = this.config.__config.columnTagName || "hlChildColumn";
        this.$emit("header-click", form);
      }
      event.stopPropagation();
    },
    showLabel(row, column) {
      let value = row[column.code];
      if (!!column.format && column.type === "DATE" && !!value) {
        value = moment(value).format(column.format);
      }
      return value;
    },
    btnClick(btn, row, index) {
      this.$emit("operate", { btn, row, index });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
